<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14.EventLoop</title>
</head>

<body>
  <!-- EventLoop 事件轮询 -->

  浏览存内核有几个区域：
  1. Call Stack 调用栈
  2. Web APIs
  3. Callback Queue 异步执行队列
  4. Event Loop 当Call stack调用栈空时开启EventLoop事件轮询 执行callback Queue中的内容
  5. Browser console

  总结Event Loop过程
  1. 同步代码，一行一行放在Call Stack执行
  2. 遇到异步，会先“记录”下，等待时机（定时，网络请求等）
  3. 时机到了，就移动到Callback Queue
  4. 如Call Stack为空（即同步代码执行完）Event Loop开始工作
  5. 轮询查找Callback Queue， 如有则移动到Call Stack执行
  6. 然后继续轮询查找

  注意：DOM事件基于Event Loop但不是异步

  <!-- Event Loop和DOM渲染 -->
  每次Call Stack清空（每次轮询结束）即每次同步任务执行完
  都是DOM重新渲染的机会，DOM结构如有改变则重新渲染
  然后再去触发下一次Event Loop












</body>

</html>